<template>
	<div class="header-container">
		<div class="header-left flex-box">
			<el-icon class="icon" size='20' @click="store.commit('collapseMenu')"><Fold /></el-icon>
			<ul class="flex-box">
				<li 
					v-for="(item,index) in selectMenu" 
					:key="item.path"
					:class="{selected: route.path === item.path}"
					class="tab flex-box">
					<el-icon size='12'><component :is="item.icon" /></el-icon>
					<router-link class="text flex-box" :to="{ path:item.path }">
						{{ item.name }}
					</router-link>
					<el-icon size='12' class="close" @click="closeTab(item, index)"><Close /></el-icon>
				</li>
			</ul>
		</div>
		<div class="header-right">
			<el-dropdown @command="handleClick">
				<div class="el-dropdown-link flex-box">
					<el-avatar :src="avatar" />
					<el-icon  style="margin-left: 4px;">
						<CaretBottom />
					</el-icon>
					<p class="user-name">{{ nickname ? nickname : '用户昵称'  }}</p>
				</div>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item command="cancel" :icon="SwitchButton">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
		</div>
	</div>
</template>
<script setup>
import { computed, ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { getUserInfoService } from '@/api/user.js'
import { SwitchButton, CaretBottom } from '@element-plus/icons-vue';
import useUserInfoStore from '@/store/userInfo.js';
import avatar0 from '@/assets/default.png'
const userInfoStore = useUserInfoStore()
//拿到stored实例
const store = useStore()
// 当前的路由对象
const route = useRoute()
const router = useRouter()
const selectMenu = computed(() => store.state.menu.selectMenu)
const nickname = ref('')
const avatar = ref(avatar0)
const getUserInfo =async() =>{
	let result =await getUserInfoService();
	//console.log('navHeader_result',result)
	//数据存储到pinia中
	userInfoStore.setInfo(result.data.data)
	nickname.value = result.data.data.nickname
	if (result.data?.data?.userPic) {
		avatar.value = result.data.data.userPic
	}
	console.log('navHeader_userInfoStore.info',userInfoStore.info)
}
getUserInfo();
// 点击关闭tag
const closeTab = (item, index) => {
	store.commit('closeMenu', item)
	//删除的是非当前页tag
	if (route.path !== item.path) {
		return
	}
	const selectMenuData = selectMenu.value
	//删除最后一项
	if (index === selectMenuData.length) {
		// 如果tag数组只有一个元素
		if (!selectMenuData.length) {
			router.push('/')
		} else {
			router.push({
				path: selectMenuData[index - 1].path
			})
		}
	} else { //如果删除的是中间tag
		router.push({
			path: selectMenuData[index].path
		})
	}
}
const handleClick = async (command) => {
	if (command === "cancel") {
		localStorage.removeItem('min_token')
		tokenStore.removeToken()
        userInfoStore.removeInfo()
		//localStorage.removeItem('min_userInfo')
		//localStorage.removeItem('min_vue')
		//window.location.href = window.location.origin
		await nextTick()
		router.push({ path: '/user/login' })
	}
}
</script>
<style lang="less" scoped>
	.flex-box {
		display: flex;
		align-items: center;
		height: 100%;
	}

	.header-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 50px;
		background-color: #fff;
		padding-right: 25px;

		.header-left {
			height: 100%;
			.icon {
				width: 45px;
				height: 100%;
			}

			.icon:hover {
				background-color: #f5f5f5;
				cursor: pointer;
			}

			.tab {
				padding: 0 10px;
				height: 100%;

				.text {
					margin: 0 5px;
				}

				.close {
					visibility: hidden;
				}

				&.selected {
					a {
						color: #409eff;
					}

					i {
						color: #409eff;
					}

					background-color: #f5f5f5;
				}
			}

			.tab:hover {
				background-color: #f5f5f5;

				.close {
					visibility: inherit;
					cursor: pointer;
					color: #000;
					//margin: 5px, 0;
				}
			}
		}

		.header-right {
			.user-name {
				margin-left: 20px;
			}
		}

		a {
			height: 100%;
			color: #333;
			font-size: 15px;
		}
	}
</style>